<template>
    <div style="font-size:16px;font-weight: 600;"> <el-radio></el-radio>观众仪表盘</div>
    <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()" style="margin-top: 10px;">
        <!--请选择展会-->
        <el-form-item>
            <el-select placeholder="请选择展会" v-model="state.dataForm.tid" clearable filterable
                @change="handleExhibitionChange">
                <el-option v-for="option in templates" :key="option.id" :label="option.template"
                    :value="option.id"></el-option>
            </el-select>
        </el-form-item>
        <!--请选择历史展会-->
        <el-form-item>
            <el-select placeholder="请选择历史展会" v-model="state.dataForm.historySelectedId" clearable filterable
                style="width: 200px;" @change="handleHistoryExhibitionChange">
                <el-option v-for="option in history" :key="option.id" :label="option.template"
                    :value="option.id"></el-option>
            </el-select>
        </el-form-item>
    </el-form>
    <div class="form">
        <div class="audience">
            <div class="audience-title">
                <svg-icon name="audience"></svg-icon>
                <span style="margin-left: 5px;">观众</span>
            </div>
            <div class="line"></div>
            <div class="statistics-container">
                <div class="stat-item">
                    <span class="stat-value">32568</span>
                    <p class="stat-desc">报名总数</p>
                </div>
                <div class="stat-item">
                    <span class="stat-value">7256</span>
                    <p class="stat-desc">报名成功数</p>
                </div>
                <div class="stat-item">
                    <span class="stat-value">24</span>
                    <p class="stat-desc">今日新增</p>
                </div>
                <div class="stat-item">
                    <span class="stat-value">465</span>
                    <p class="stat-desc">本月新增</p>
                </div>
            </div>
        </div>
        <div class="scene">
            <div class="audience-title">
                <svg-icon name="scene"></svg-icon>
                <span style="margin-left: 5px;">现场</span>
            </div>
            <div class="line"></div>
            <div class="statistics-container">
                <div class="stat-item">
                    <span class="stat-value">32568</span>
                    <p class="stat-desc">到场总数</p>
                </div>
                <div class="stat-item">
                    <span class="stat-value">7256</span>
                    <p class="stat-desc">预登记到场</p>
                </div>
                <div class="stat-item">
                    <span class="stat-value">24</span>
                    <p class="stat-desc">现场报名</p>
                </div>
                <div class="stat-item">
                    <span class="stat-value">465</span>
                    <p class="stat-desc">已签到数</p>
                </div>
            </div>
        </div>
        <div class="charge">
            <div class="audience-title">
                <svg-icon name="charge"></svg-icon>
                <span style="margin-left: 5px;">费用</span>
            </div>
            <div class="line"></div>
            <div class="statistics-container">
                <div class="stat-item">
                    <span class="stat-value">32568</span>
                    <p class="stat-desc">总金额</p>
                </div>
                <div class="stat-item">
                    <span class="stat-value">7256</span>
                    <p class="stat-desc">未支付</p>
                </div>
                <div class="stat-item">
                    <span class="stat-value">24</span>
                    <p class="stat-desc">已退款</p>
                </div>
                <div class="stat-item">
                    <span class="stat-value">465</span>
                    <p class="stat-desc">今日收入</p>
                </div>
                <div class="stat-item">
                    <span class="stat-value">465</span>
                    <p class="stat-desc">本月收入</p>
                </div>
            </div>
        </div>
    </div>
    <div class="box">
        <figure>
            <div class="line-form"></div>
            <v-chart :option="pie" :autoresize="true" />
        </figure>
        <figure>
            <div class="line-form"></div>
            <v-chart :option="pie2" :autoresize="true" />
        </figure>
    </div>
    <div class="box">
        <figure>
            <div style="display: flex;justify-content: space-between;justify-items: center;height: 40px;">
                <div class="audience-form">观众报名趋势</div>
                <div style="margin-top: 12px;">
                    <el-select placeholder="请选择时间范围" v-model="state.dataForm.time" clearable style="width: 180px;">
                        <el-option label="最近7天" value="7"></el-option>
                        <el-option label="最近15天" value="15"></el-option>
                        <el-option label="最近30天" value="30"></el-option>
                    </el-select>
                </div>
            </div>
            <div class="line-form"></div>
            <v-chart :option="bar" :autoresize="true" />
        </figure>
        <figure>
            <div class="line-form"></div>
            <v-chart :option="age" :autoresize="true" />
        </figure>
    </div>
    <figure>
        <div class="line-form"></div>
        <v-chart :option="gender" :autoresize="true" />
    </figure>
</template>

<script lang="ts" setup>
import SvgIcon from "@/components/base/svg-icon";
import useView from "@/hooks/useView";
import { ref, provide, reactive, toRefs } from "vue";
import baseService from "@/service/baseService";
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { BarChart, LineChart, PieChart, MapChart, RadarChart, ScatterChart, EffectScatterChart, LinesChart, } from "echarts/charts";
import { GridComponent, PolarComponent, GeoComponent, TooltipComponent, LegendComponent, TitleComponent, VisualMapComponent, DatasetComponent, ToolboxComponent, DataZoomComponent } from "echarts/components";
import VChart, { THEME_KEY } from "vue-echarts";
import * as echarts from 'echarts';

const view = reactive({
    getDataListURL: 'noc/nocly/page',
    getDataListIsPage: true,
    deleteURL: "noc/nocly/delete",
    deleteIsBatch: true,
    dataForm: {
        time: '7',
        tid: '' as any, //展会名称
        gid: '', //分组
        id: "",
        remark: "",
        historySelectedId: "" as any,
    },
});


const init = () => {
    getHistory()
    getTemplates();
};


//选择展会
const handleExhibitionChange = () => {
    state.dataForm.historySelectedId = null;
};

//选择历史展会
const handleHistoryExhibitionChange = () => {
    state.dataForm.tid = null;
}

//展会名称列表
const templates = ref<any[]>([]);
const getTemplates = () => {
    baseService.get('/crm/noctemplate/list', { limit: 300 }).then((res) => {
        if (res.code == 0) {
            //刷新
            templates.value = res.data;
        }
    });
};

//历史展会列表
const history = ref<any[]>([]);
const getHistory = () => {
    baseService.get('/crm/noctemplate/listExpireByRole').then((res) => {
        if (res.code == 0) {
            //刷新
            history.value = res.data;
        }
    });
};


use([BarChart, LineChart, PieChart, MapChart, RadarChart, ScatterChart, EffectScatterChart, LinesChart, GridComponent, PolarComponent, GeoComponent, TooltipComponent, LegendComponent, TitleComponent, VisualMapComponent, DatasetComponent, CanvasRenderer, ToolboxComponent, DataZoomComponent]);

provide(THEME_KEY, "westeros");

const random = () => {
    return Math.round(300 + Math.random() * 700) / 10;
};


const pie = ref({
    title: {
        text: "预登记来源占比TOP8",
        left: "center"
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        top: '90%',
        left: 'center',
        data: ["来源1", "来源2", "来源3", "来源4", "来源5", "来源6", "来源7", "来源8", "其他"]
    },
    series: [
        {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
            },
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: 30,
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                { value: 1048, name: '来源1' },
                { value: 735, name: '来源2' },
                { value: 580, name: '来源3' },
                { value: 484, name: '来源4' },
                { value: 300, name: '来源5' },
                { value: 300, name: '来源6' },
                { value: 300, name: '来源7' },
                { value: 300, name: '来源8' },
                { value: 300, name: '其他' },

            ]
        }
    ]
});

const pie2 = ref({
    title: {
        text: "预登记到场来源占比TOP8",
        left: "center"
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        top: '90%',
        left: 'center',
        data: ["来源1", "来源2", "来源3", "来源4", "来源5", "来源6", "来源7", "来源8", "其他"]
    },
    series: [
        {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
            },
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: 30,
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                { value: 1048, name: '来源1' },
                { value: 735, name: '来源2' },
                { value: 580, name: '来源3' },
                { value: 484, name: '来源4' },
                { value: 300, name: '来源5' },
                { value: 300, name: '来源6' },
                { value: 300, name: '来源7' },
                { value: 300, name: '来源8' },
                { value: 300, name: '其他' },

            ]
        }
    ]
});

const bar = ref({
    color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
    //   title: {
    //     text: 'Gradient Stacked Area Chart'
    //   },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    legend: {
        data: ['Line 1',]
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            //   name: 'Line 1',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
                width: 0
            },
            showSymbol: false,
            areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: 'rgb(128, 255, 165)'
                    },
                    {
                        offset: 1,
                        color: 'rgb(1, 191, 236)'
                    }
                ])
            },
            emphasis: {
                focus: 'series'
            },
            data: [140, 232, 101, 264, 90, 340, 250]
        },
    ]

});

const age = ref({
    title: {
        text: "观众年龄段占比",
        left: "center"
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        top: '90%',
        left: 'center',
        data: ["<18", "18-20", "20-25", "25-30", "30-35", "35-40", "40-45", "45-50", "50-55", ">55", "未知"]
    },
    series: [
        {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
            },
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: 30,
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                { value: 1048, name: '<18' },
                { value: 735, name: '18-20' },
                { value: 580, name: '20-25' },
                { value: 484, name: '25-30' },
                { value: 300, name: '30-35' },
                { value: 300, name: '35-40' },
                { value: 300, name: '40-45' },
                { value: 300, name: '50-55' },
                { value: 300, name: '>55' },
                { value: 300, name: '未知' },

            ]
        }
    ]
});

const gender = ref({
    title: {
        text: "观众性别占比",
        left: "center"
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        top: '90%',
        left: 'center',
        data: ["预登记男性", "预登记女性", "现场男性", "现场女性", "未知"]
    },
    series: [
        {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
            },
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: 30,
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                { value: 1048, name: '预登记男性' },
                { value: 735, name: '预登记女性' },
                { value: 580, name: '现场男性' },
                { value: 484, name: '现场女性' },
                { value: 300, name: '未知' },
            ]
        }
    ]
});

const state = reactive({ ...useView(view), ...toRefs(view) });

init();
</script>

<style lang="less" scoped>
.box {
    margin-top: 50px;
    display: flex;
    justify-content: center;
}

figure {
    display: inline-block;
    position: relative;
    padding: 0px 30px 30px 30px;
    opacity: 1;
    border-radius: 8px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);

    .echarts {
        width: 715px;
        height: 400px;
    }
}


.form {
    display: flex;
    justify-content: space-between;
}

.audience {

    width: 513.82px;
    height: 166.99px;
    opacity: 1;
    border-radius: 8px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
}

.scene {
    width: 513.82px;
    height: 166.99px;
    opacity: 1;
    border-radius: 8px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
}

.charge {
    width: 513.82px;
    height: 166.99px;
    opacity: 1;
    border-radius: 8px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
}

.statistics-container {
    display: flex;
    justify-content: space-around;
    margin: 20px 20px 20px 10px;
}

.audience-title {
    margin: 20px 20px 20px 20px;
    font-size: 15px;
}

.audience-form {
    margin-top: 20px;
    font-size: 15px;

}

.line-form {
    margin: 20px auto;
}

.line {
    border: 1px solid rgba(230, 230, 230, 1);
    width: 92%;
    margin: 0 auto;
}

/* 单个统计项样式 */
.stat-item {
    text-align: center;
}

/* 数值样式 */
.stat-value {
    font-size: 24px;

}

/* 描述文字样式 */
.stat-desc {
    font-size: 14px;
    color: #666;
}
</style>
